<template>
  <div class="w-[161px]">
    <div class="relative mr-[20px] flex w-[140px] flex-col items-center">
      <img class="h-[98px] w-[98px]" :src="imageUrl" alt="image" />
      <div class="relative mt-[30px]">
        <span class="text-[64px] leading-none" :style="{ color }">{{ step }}</span>
        <span class="absolute bottom-0 left-1/2 -translate-x-1/2 whitespace-nowrap text-[16px] leading-none text-[#000]">{{
          mainTitle
        }}</span>
      </div>
      <div class="mt-[7px] whitespace-nowrap text-[12px] leading-none text-[#000]">{{ subTitle }}</div>
      <svg-icon
        class="absolute right-[0] top-[35px] h-[27px] w-[21px] translate-x-full"
        name="arrow"
        :color="color"
        v-if="hadArrow"
      ></svg-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    /** 主标题 */
    mainTitle: string
    /** 子标题 */
    subTitle: string
    /** 步骤 */
    step: string
    /** 颜色 */
    color: string
    /** 图片 URL */
    imageUrl: string
    /** 是否有箭头 */
    hadArrow?: boolean
  }>(),
  { hadArrow: true }
)
</script>
